<template>
    <div>
        <div class="navSS" :style="{'opacity':opacity}">nav</div>
        <router-link to="/detail" style="margin-top:100px;display:block">detail</router-link>
    </div>
</template>

<script>
    export default {
        name:'nav',
        data() {
            return {
            opacity:0
            }
        },
        mounted() {
            console.log("nav")
            window.addEventListener("scroll",this.handleScroll)
        },
        destroyed() {
            window.removeEventListener("scroll",this.handleScroll)
        },
        methods: {
            handleScroll(){
            var scrollTop = document.documentElement.scrollTop;
            var opacity = scrollTop/300;
            if(opacity>1){
                opacity = 1
            }
            this.opacity = opacity
            }
        },
    }
</script>

<style  scoped>
.navSS{
    width: 100%;
    background: red;
    position: fixed;
    top: 0;
}
</style>